<template>
     <h1>API</h1>
  <el-row class="mb-4">
    <b>属性</b>
    <table width="100%">
        <tr>
          <th width="15%">属性名</th>
          <th>说明</th>
          <th width="15%">类型</th>
          <th width="15%">默认值</th>
        </tr>
        <tr v-for="item in attrs">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.type}}</td>
          <td>{{item.defaultValue}}</td>
        </tr>
      </table>
      <b>Slots</b>
    <table width="100%">
      <tr>
          <th width="30%">名称</th>
          <th>说明</th>
      </tr>
      <tr v-for="item in slots">
          <td>{{item.name}}</td>
          <td>{{item.desc}}</td>
      </tr>
    </table>
  </el-row>

    <h1>基本用法</h1>
    <el-row class="demo-autocomplete">
        <el-col :span="12">
            <div class="sub-title my-2 text-sm text-gray-600">
                list suggestions when activated
            </div>
            <el-autocomplete
                v-model="state1"
                :fetch-suggestions="querySearch"
                clearable
                class="inline-input w-50"
                placeholder="Please Input"
                @select="handleSelect"/>
        </el-col>
        <el-col :span="12">
            <div class="sub-title my-2 text-sm text-gray-600">
                list suggestions on input
            </div>
            <el-autocomplete
                v-model="state2"
                :fetch-suggestions="querySearch"
                :trigger-on-focus="false"
                clearable
                class="inline-input w-50"
                placeholder="Please Input"
                @select="handleSelect"/>
        </el-col>
    </el-row>
    <h1>自定义模板</h1>
    <el-row class="demo-autocomplete">
        <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearch"
            popper-class="my-autocomplete"
            placeholder="Please Input"
            @select="handleSelect">
            <template #suffix>
                <el-icon class="el-input__icon" @click="handleIconClick">
                    <edit />
                </el-icon>
            </template>
            <template #default="{ item }">
                <div class="value">{{ item.value }}</div>
                <span class="link">{{ item.link }}</span>
            </template>
        </el-autocomplete>
    </el-row>
    <h1>模拟远程接口调用</h1>
    <el-row class="demo-autocomplete">
        <el-autocomplete
            v-model="state3"
            :fetch-suggestions="querySearchAsync"
            popper-class="my-autocomplete"
            placeholder="Please Inputs"
            @select="handleSelect">
        </el-autocomplete>
    </el-row>


</template>
<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>
<script>
export default {
    data(){
        return {
            state:"",
            state1:"",
            state2:"",
            state3:"",
            restaurants: [
                { value: 'vue', link: 'https://github.com/vuejs/vue' },
                { value: 'element', link: 'https://github.com/ElemeFE/element' },
                { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
                { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
                { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
                { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
                { value: 'babel', link: 'https://github.com/babel/babel' },
            ],
            remoteTimeout: null,
            attrs:[{
              "name":"model-value / v-model",
              "desc":"选中项绑定值",
              "type":"string",
              "defaultValue":"-"
            },{
              "name":"placeholder",
              "desc":"占位文本",
              "type":"string",
              "defaultValue":"-"
            }],
            slots:[{
              "name":"default",
              "desc":"自定义默认内容"
            }]
        }
    },
    methods:{
        querySearch:function(val, cb){
            //console.log(this.restaurants)
            const results = this.restaurants
                ? this.restaurants.filter((item)=>{
                    return item.value.toLowerCase().indexOf(val)===0
                }): val
            cb(results)
        },
        querySearchAsync:function(val, cb){
            const results = this.restaurants
                ? this.restaurants.filter((item)=>{
                    return item.value.toLowerCase().indexOf(val)===0
                }): val
            clearTimeout(this.remoteTimeout)
            this.remoteTimeout = setTimeout(() => {
                cb(results)
            }, 3000 * Math.random())
        },
        handleSelect:function(item) {
            console.log(item)
        },
        handleIconClick:function(event){
            console.log(event)
        }
    }

}
</script>

<style scoped>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>